/*
 * @Author: yangrongxin
 * @Date: 2021-08-03 14:50:47
 * @LastEditors: yangrongxin
 * @LastEditTime: 2021-08-03 14:58:08
 */
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components';
import { connect } from 'react-redux';
import { useSafeArea } from '@/hooks/index';
import './index.module.less';

const tabBarConfig = {
  color: '#7A7E83',
  selectedColor: '#3cc51f',
};

const listConfig = [
  {
    url: '/pages/Home/index',
    text: '首页',
  },
  {
    url: '/pages/PatientEducation/index',
    text: '宣教',
  },
  {
    url: '/pages/Evaluation/index',
    text: '测评',
  },
  {
    url: '/pages/Team/index',
    text: '团队',
  },
  {
    url: '/pages/My/index',
    text: '我的',
  },
];

const CustomTabBar = (props) => {
  const { curTabIndex } = props;

  const [, safeBottom] = useSafeArea();

  const changeTabItem = (url) => {
    Taro.switchTab({
      url,
    });
  };
  // 此处不能使用css module注入样式
  return (
    <View
      className="tabBarWapper"
      style={{
        paddingBottom: `${safeBottom}px`,
      }}
    >
      {listConfig.map((item: any, index: number) => {
        const isActive = index === curTabIndex;
        // TODO: selectedKey变化但是 组件样式不进行刷新问题处理
        return (
          <View
            className={`tabBarContentItem ${isActive ? 'selected' : ''}`}
            key={String(index)}
            onClick={() => {
              changeTabItem(item.url);
            }}
          >
            <View style={`color: ${isActive ? tabBarConfig.selectedColor : tabBarConfig.color}`}>占位</View>
            <View style={`color: ${isActive ? tabBarConfig.selectedColor : tabBarConfig.color}`}>{item.text}</View>
          </View>
        );
      })}
    </View>
  );
};

export default connect(({ global }) => ({ ...global }))(CustomTabBar);
